<script setup name="AttachmentCurd">
import { attachmentAdd, attachmentEdit, attachmentDel } from "@/api/sys/attachment";
import { dictGetList } from "@/api/sys/dict";
import Picture from "@/views/sys/attachment/Attachments/picture";
import { getCurrentInstance, reactive } from "vue";
const { proxy } = getCurrentInstance();
const pd = reactive({
    open: false,
    title: "",
    treeId: 108,
    treeList: [],
    form: {
        id: null,
        url: null,
        name: null,
        type: null,
        fileSize: null,
        remark: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null
    }
});


function resSeletUpload(list) {
    if (list.length > 0) {
        list.forEach(element => {
            pd.form.url = element.url
        });
    } else {
        pd.form.url = ''
    }


}
/** 提交按钮 */
function submitForm() {
    proxy.$refs["attachmentRef"].validate(valid => {
        if (valid) {
            if (pd.form.id != null) {
                attachmentEdit(pd.form).then(response => {
                    proxy.$modal.msgSuccess("修改成功");
                    pd.open = false;
                    emit("ok");
                });
            } else {
                attachmentAdd(pd.form).then(response => {
                    proxy.$modal.msgSuccess("新增成功");
                    pd.open = false;
                    emit("ok");
                });
            }
        }
    });
}

// 新增
function add() {
    pd.title = "新增产品";
    pd.open = true;
}

// 修改
function edit(attachment) {
    //合并
    console.log(pd.form);
    pd.form = { ...pd.form, ...attachment };
    console.log(pd.form);
    pd.title = "修改产品";
    pd.open = true;
}

// 删除
function del(id) {
    proxy.$modal.confirm('是否确认删除编号为:"' + id + '"的数据项？').then(function () {
        return attachmentDel(id);
    }).then(() => {
        proxy.$modal.msgSuccess("删除成功");
        pd.open = false;
        emit("ok");
    }).catch(() => {
    });
}
// 取消按钮
function cancel() {
    pd.open = false;
    reset();
}
// 表单重置
function reset() {
    pd.form = {
        id: 0,
        url: null,
        name: null,
        type: null,
        treeId: null,
        fileSize: null,
        remark: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null
    };
    pd.operation = 0;
    pd.title = "";
    proxy.resetForm("attachmentRef");
}
function getTreeList() {
    dictGetList({ ancestors: pd.treeId }).then(res => {
        pd.treeList = proxy.handleTree(res.data, 'id', 'parentId', 'children');
    });
}
getTreeList()
defineExpose({ add, edit, del });
const emit = defineEmits(["ok"]);
</script>
<template>
    <!-- 添加或修改附件对话框 -->
    <el-dialog :title="pd.title" v-model="pd.open" width="500px" append-to-body @closed="cancel">
        <el-form ref="attachmentRef" :model="pd.form" label-width="80px">
            <el-form-item label="图片内容" prop="url">
                <Picture :idList="pd.form.id" :styleType="false" limit="1" :isCropper="true" @ok="resSeletUpload" />
                <!-- <el-image style="width: 150px; height: 150px" :src="pd.form.url" :fit="fill" /> -->
            </el-form-item>
            <el-form-item label="文件类型" prop="type">
                <el-input v-model="pd.form.type" placeholder="请输入文件类型" />
            </el-form-item>
            <el-form-item label="文件分类" prop="treeId">
                <el-select v-model="pd.form.treeId" placeholder="请选择图片分类">
                    <el-option v-for="item in pd.treeList" :key="item.value" :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="文件名" prop="name">
                <el-input v-model="pd.form.name" placeholder="请输入原来的文件名" />
            </el-form-item>
            <el-form-item label="文件大小" prop="fileSize">
                <el-input v-model="pd.form.fileSize" placeholder="请输入文件大小" />
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <el-input v-model="pd.form.remark" type="textarea" placeholder="请输入内容" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="pd.open = false">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>


